<template>
    <!-- <div >
        <div class="user">
    <UserSearch
      @query-click="handleQueryClick"
      @reset-click="handleResetClick"
    /> -->
    <!-- <user-content
      ref="contentRef"
      @new-click="handleNewClick"
      @edit-click="handleEditClick"
    />
    <user-modal ref="modalRef" /> -->

    <!-- <el-table :data="tableData" stripe style="width: 100%">
<el-table-column
:width="item.width"
:prop="item.prop"
:label="$t(`table.${item.label}`)"
v-for="(item, index)in options"
:key="index"
>
<template v-slot="{ row }" v-if="item.prop ==='mg_state'">
<el-switch v-model="row.mg_state" @change =changeState()></el-switch>
</template>
</el-table-column>

</el-table> -->
<!-- <el-button
type="primary"
@click="handleDialogValue"></el-button> -->
<table>
            <thead>
                <tr>
                    <td>用户名</td>
                    <td>昵称</td>
                    <td>备注</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, key) in table" :key="key" >
                <td>
                    {{ item.userName }}
                    </td>
                    <td>
                        {{ item.nickName }}
                    </td>
                    <td>
                        {{ item.remark }}
                    </td>
                </tr>
            </tbody>
            </table>

            <!-- <DiaLog v-model="dialogVisable">
            </DiaLog> -->
</template>

<script setup lang='ts'>
import { ref, type Ref } from 'vue';
import axios from "axios";
import useUserStore from '@/stores';
// import DiaLog from '@/components/DiaLog.vue';
// import UserSearch from '../user/temporary/UserSearch.vue'
// import UserContent from '../user/temporary/UserContent.vue'
// import UserModal from '../user/temporary/UserModal.vue'

const table = ref<any[]>([])
    const store = useUserStore()
const getUserList= async () => {
    const {data} = await axios.get('system/user/list',{
        headers: {
      Authorization: `Bearer ${store.$state.token}`
    }
    })
    console.log(data);
     table.value = data.rows
}
getUserList()

// const contentRef = ref<InstanceType<typeof UserContent>>()
// function handleQueryClick(formData: any) {
//   contentRef.value?.fetchUserListData(formData)
// }
// function handleResetClick() {
//   contentRef.value?.fetchUserListData()
// }

// const tableData = ref<any[]>([])
//     const dialogVisable: Ref<boolean> = ref(false);

// const handleDialogValue = () => {
//     dialogVisable.value = true
// }
</script>

<style scoped>
button{
    background-color: aqua;
}
</style>